<template>
  <div id="keepTable">
    <h3 class="echarts-title">新增留存统计</h3>
    <!--上部搜索条件组件-->
    <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
    <div class="table-conBtn">
      <el-button
        v-permission="'wh:system:keepAnalysis:exportStatistics'"
        type="warning"
        icon="el-icon-download"
        @click="exportRoles"
      >
        导出
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <div class="table-conBtn">
      <el-radio-group v-model="identity">
        <el-radio-button
          v-for="item in identityList"
          :label="item.dictValue"
          :key="item.dictValue"
        >
          {{ item.dictLabel }}</el-radio-button
        >
      </el-radio-group>
    </div>
    <div class="tab-box">
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        :cell-class-name="tableCellClassName"
        ref="table"
      >
        <el-table-column
          label="时间"
          prop="date"
          show-overflow-tooltip
          min-width="120"
        ></el-table-column>
        <el-table-column
          label="新增用户数"
          prop="dateNewCount"
          min-width="130"
        ></el-table-column>
        <el-table-column label="1天后">
          <template slot-scope="scope">
            {{ getShowNum(2, scope.row) }}
          </template>
        </el-table-column>
        <el-table-column label="2天后">
          <template slot-scope="scope">
            {{ getShowNum(3, scope.row) }}
          </template>
        </el-table-column>
        <el-table-column label="3天后">
          <template slot-scope="scope">
            {{ getShowNum(4, scope.row) }}</template
          >
        </el-table-column>
        <el-table-column label="4天后">
          <template slot-scope="scope">
            {{ getShowNum(5, scope.row) }}</template
          >
        </el-table-column>
        <el-table-column label="5天后">
          <template slot-scope="scope">
            {{ getShowNum(6, scope.row) }}</template
          >
        </el-table-column>
        <el-table-column label="6天后">
          <template slot-scope="scope">
            {{ getShowNum(7, scope.row) }}</template
          >
        </el-table-column>
        <el-table-column label="7天后">
          <template slot-scope="scope">
            {{ getShowNum(8, scope.row) }}</template
          >
        </el-table-column>
        <el-table-column label="14天后">
          <template slot-scope="scope">
            {{ getShowNum(14, scope.row) }}</template
          >
        </el-table-column>
        <el-table-column label="30天后">
          <template slot-scope="scope">
            {{ getShowNum(30, scope.row) }}</template
          >
        </el-table-column>
      </el-table>
      <!--分页-全局组件-->
      <pageCom
        :searchParams="searchParams"
        :total="total"
        @searchList="searchList"
      ></pageCom>
    </div>
  </div>
</template>

<script>
import {
  getTableNum,
  getTableRate,
  exportTableNum,
  exportTableRate
} from '@/api/dataStatistics/keepAnalysis/index.js' // 接口
import topSearch from '@component/dataStatistics/keepAnalysis/topSearchTable' // 上部搜索条件
import { sysNormalDisable } from '@utils/dictionariesFunc'
export default {
  name: 'keepTable',
  msg: '新增留存统计',
  props: ['powerAry'],
  components: {
    topSearch /*,
    dialogAddEdit*/
  },
  watch: {
    identity(newV, oldV) {
      /*全部/正式用户/试学用户/其他*/
      this.searchParams.pageNum = 1
      this.searchList()
    }
  },
  data() {
    return {
      loading: false,
      total: 20,
      tableData: [], // table内容
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      exportType: '',
      identity: '',
      identityList: [{ dictLabel: '全部用户', dictValue: '' }],
      formInline: {
        save: '', //留存
        source: '', //来源
        timeType: '', //统计时间
        startDate: '', // 开始时间
        endDate: '', // 结束时间
        createTime: []
      },
      keyValueNum: {
        '2v': 'count2',
        '3v': 'count3',
        '4v': 'count4',
        '5v': 'count5',
        '6v': 'count6',
        '7v': 'count7',
        '8v': 'count8',
        '9v': 'count14',
        '10v': 'count30'
      },
      keyValueRate: {
        '2v': 'rate2',
        '3v': 'rate3',
        '4v': 'rate4',
        '5v': 'rate5',
        '6v': 'rate6',
        '7v': 'rate7',
        '8v': 'rate8',
        '9v': 'rate14',
        '10v': 'rate30'
      }
    }
  },
  mounted() {
    this.getStatusList()
  },
  methods: {
    /* 获取字典状态 */
    async getStatusList() {
      let data = await sysNormalDisable('dataview_user_type')
      this.identityList = this.identityList.concat(data)
    },
    /*计算该列返回字段*/
    getShowNum(index, row) {
      if (this.exportType === 'num') {
        return row['count' + index]
      } else {
        let num = row['rate' + index]
        return num > 0 ? `${num}%` : num
      }
    },
    /*计算列名*/
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      if (columnIndex > 1) {
        let key = columnIndex + 'v'
        let value = ''
        if (this.exportType === 'num') {
          //留存数
          value = row[this.keyValueNum[key]]
          let num = parseFloat(value)
          if (num === 0) return 'color-one'
          if (num > 0 && num <= 1000) return 'color-two'
          if (num > 1000 && num <= 5000) return 'color-three'
          if (num > 5000) return 'color-four'
          /* if (num > 200) return 'color-five'
         if (num <= 10) return 'color-one'
          if (num > 10 && num <= 50) return 'color-two'
          if (num > 50 && num <= 100) return 'color-three'
          if (num > 100 && num <= 200) return 'color-four'
          if (num > 200) return 'color-five'*/
        } else {
          //留存率
          value = row[this.keyValueRate[key]]
          let num = parseFloat(value)
          if (num <= 10) return 'color-one'
          if (num > 10 && num <= 20) return 'color-two'
          if (num > 20 && num <= 30) return 'color-three'
          if (num > 30 && num <= 40) return 'color-four'
          if (num > 40) return 'color-five'
        }
        if (!value) {
          return ''
        }
        /* console.log(this.keyValue[key])
           console.log(value)*/
      } else {
        return ''
      }
    },
    /* 获取列表 */
    searchList() {
      this.loading = true
      this.exportType = this.formInline.save
      let obj = Object.assign(
        { identity: this.identity },
        this.searchParams,
        this.formInline
      )
      delete obj.createTime
      delete obj.save
      delete obj.timeType
      if (this.exportType === 'num') {
        getTableNum(
          obj,
          (response) => {
            this.loading = false
            this.tableData = response.rows
            this.total = response.total
          },
          (response) => {
            this.loading = false
            this.$message({
              message: response.message,
              type: 'warning'
            })
          }
        )
      } else {
        getTableRate(
          obj,
          (response) => {
            this.loading = false
            this.tableData = response.rows
            this.total = response.total
          },
          (response) => {
            this.loading = false
            this.$message({
              message: response.message,
              type: 'warning'
            })
          }
        )
      }
    },
    /* 导出 */
    exportRoles() {
      this.$confirm('确定导出当前数据吗？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url =
          this.exportType === 'num' ? exportTableNum() : exportTableRate()
        let obj = Object.assign({ identity: this.identity }, this.formInline)
        delete obj.createTime
        delete obj.save
        delete obj.timeType
        this.downFile('get', url, obj, '新增留存统计')
      })
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    }
  }
}
</script>

<style lang="less">
#keepTable {
  min-height: 500px;
  padding-top: 20px;
  .el-table .color-one {
    background: #e2f3e2;
  }
  .el-table .color-two {
    background: #c8ebc8;
  }
  .el-table .color-three {
    background: #aee2ae;
  }
  .el-table .color-four {
    background: #94da94;
  }
  .el-table .color-five {
    background: #7ad17a;
  }
  .tab-box {
    margin: 0 25px;
  }
}
</style>
